<template>
  <div style="padding: 0">
      <div class="xtx-bread" @click="back">
          <a href="javascript:;" > < 返回  </a>
          <span></span>
      </div>
      <div class="xtx-product-info">
          <div class="left">
              <div class="pictrue">
                  <div class="middle">
                      <img :src="form.img" alt="">
                      <div class="layer"></div>
                  </div>
                  <div class="small">
                      <ul>
                          <li class="active"><img :src="form.img" alt=""></li>
<!--                          <li><img src="@/images/2.jpg" alt=""></li>-->
<!--                          <li><img src="@/images/3.jpg" alt=""></li>-->
<!--                          <li><img src="@/images/4.jpg" alt=""></li>-->
<!--                          <li><img src="@/images/5.jpg" alt=""></li>-->
                      </ul>
                  </div>
                  <div class="large"></div>
              </div>
              <div class="other">
                  <ul>
                      <li>
                          <p>销量人气</p>
                          <p>{{form.popularity}}+</p>
                          <p>销量人气</p>
                      </li>
                      <li>
                          <p>商品评价</p>
                          <p>999+</p>
                          <p>查看评价</p>
                      </li>
                      <li>
                          <p>收藏人气</p>
                          <p>299+</p>
                          <p><a href="javascript:;">收藏商品</a></p>
                      </li>
                      <li>
                          <p>品牌信息</p>
                          <p>{{form.firm}}</p>
                          <p><a href="javascript:;">品牌主页</a></p>
                      </li>
                  </ul>
              </div>
          </div>
          <div class="right">
              <h3 class="name">{{form.name}}</h3>
              <p class="desc">{{form.introduce}}</p>

              <p class="price"><span class="now">{{form.price}}</span> <span class="old">{{form.price+100}}</span></p>
              <div class="address">
                  <div class="item">
                      <div class="dt">促销</div>
                      <div class="dd">{{form.active}}</div>
                  </div>
                  <div class="item">
                      <div class="dt">配送</div>
                      <div class="dd">至
                          <div class="box">
                              <span>陕西 西安 <i></i></span>
                          </div>
                      </div>
                  </div>
                  <div class="item">
                      <div class="dt">服务</div>
                      <div class="dd">
                          <span class="fw">无忧退货</span>
                          <span class="fw">快速退款</span>
                          <span class="fw">免费包邮</span>
                          <a href="#" class="lj">了解详情</a>
                      </div>
                  </div>
              </div>
              <div class="attrs">
                  <div class="item">
                      <div class="dt">颜色</div>
                      <div class="dd">
                          <span class="size">22英寸</span>
                          <span class="size">42英寸</span>
                          <span class="size">52英寸</span>
                          <span class="size">62英寸</span>
                      </div>
                  </div>
                  <div class="item">
                      <div class="dt">数量</div>
                      <div class="dd">
                          <div class="num">
                              <a href="javascript:;" @click="decrease">-</a>
                              <input type="text" :value="s">
                              <a href="javascript:;"@click="add">+</a>
                          </div>
                      </div>
                  </div>
                  <div class="item" @click="sp">
                      <a class="buy" href="javascript:;">立即购买</a>
                  </div>
              </div>
          </div>
      </div>
  </div>

</template>

<script>
    import '@/assets/common.css';
    import '@/assets/product.css';
    import request from "@/utils/request";
    export default {
        data(){
return{
id : localStorage.getItem("id"),
    form:{},
    userData:{},
    s:1,
    username:JSON.parse(localStorage.getItem("user")).username,
}
    },
        created() {
this.load()

        }
        ,
        mounted() {
            // 1. 获取三个盒子
            // 2. 小盒子 图片切换效果
            const small = document.querySelector('.small')
            //  中盒子
            const middle = document.querySelector('.middle')
            //  大盒子
            const large = document.querySelector('.large')
            // 2. 事件委托
            small.addEventListener('mouseover', function (e) {
                if (e.target.tagName === 'IMG') {
                    // console.log(111)
                    // 排他 干掉以前的 active  li 上面
                    this.querySelector('.active').classList.remove('active')
                    // 当前元素的爸爸添加 active
                    e.target.parentNode.classList.add('active')
                    // 拿到当前小图片的 src
                    // console.log(e.target.src)
                    // 让中等盒子里面的图片，src 更换为   小图片src
                    middle.querySelector('img').src = e.target.src
                    // 大盒子更换背景图片
                    large.style.backgroundImage = `url(${e.target.src})`
                }
            })


            // 3. 鼠标经过中等盒子， 显示隐藏 大盒子
            middle.addEventListener('mouseenter', show)
            middle.addEventListener('mouseleave', hide)
            let timeId = null
            // 显示函数 显示大盒子
            function show() {
                // 先清除定时器
                clearTimeout(timeId)
                large.style.display = 'block'
            }
            // 隐藏函数 隐藏大盒子
            function hide() {
                timeId = setTimeout(function () {
                    large.style.display = 'none'
                }, 200)
            }


            // 4. 鼠标经过大盒子， 显示隐藏 大盒子
            large.addEventListener('mouseenter', show)
            large.addEventListener('mouseleave', hide)


            // 5. 鼠标经过中等盒子，显示隐藏 黑色遮罩层
            const layer = document.querySelector('.layer')
            middle.addEventListener('mouseenter', function () {
                layer.style.display = 'block'
            })
            middle.addEventListener('mouseleave', function () {
                layer.style.display = 'none'
            })
            // 6.移动黑色遮罩盒子
            middle.addEventListener('mousemove', function (e) {
                // let x = 10, y = 20
                // console.log(11)
                // 鼠标在middle 盒子里面的坐标 = 鼠标在页面中的坐标 - middle 中等盒子的坐标
                // console.log(e.pageX)鼠标在页面中的坐标
                // middle 中等盒子的坐标
                // console.log(middle.getBoundingClientRect().left)
                let x = e.pageX - middle.getBoundingClientRect().left
                let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop
                // console.log(x, y)
                // 黑色遮罩移动 在 middle 盒子内 限定移动的距离
                if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
                    // 黑色盒子不是一直移动的
                    // 声明2个变量 黑色盒子移动的 mx my变量
                    let mx = 0, my = 0
                    if (x < 100) mx = 0
                    if (x >= 100 && x <= 300) mx = x - 100
                    if (x > 300) mx = 200

                    if (y < 100) my = 0
                    if (y >= 100 && y <= 300) my = y - 100
                    if (y > 300) my = 200

                    layer.style.left = mx + 'px'
                    layer.style.top = my + 'px'
                    // 大盒子的背景图片要跟随 中等盒子移动  存在的关系是 2倍
                    large.style.backgroundPositionX = -2 * mx + 'px'
                    large.style.backgroundPositionY = -2 * my + 'px'
                }
            })
        },
        methods:{
            back(){
                this.$router.push("/mall")
            },
            load(){
request.get("/shop/"+this.id).then(res =>{
    this.form = res
    console.log(res)
})
            },
            decrease(){
                if (this.s>1){
                    this.s = this.s - 1
                }
            },
            add(){
                if (this.s<100){
                    this.s = this.s + 1
                }
            },
            sp(){
                request.get("/shop/sale",{params:{
                        id:this.id,
                        sum : this.s
                    }}).then(res=>{
                    if(res){
                        this.$message.success("购买成功")
                        this.userData.name = this.form.name
                        this.userData.sender = this.form.userName
                        this.userData.addressee = this.form.address
                        this.userData.price = this.form.price * this.sum
                        this.userData.userName = this.username
                        request.post("/upackage",this.userData).then(res=>{
if (res){
    setTimeout(res =>{
        this.$message.success("商家已发货")
    },5000)
}
                        })
                    }
                    else {
                        this.$message.error("库存不足")
                    }
                })
            }
        }

    }

</script>

<style scoped>

</style>